<template>
	<div class="wrap admin">
		<div class="page-title">
			<h3>系统管理员</h3>
			<ul class="oper-butn">
				<li>	
					<img :src="`/static/${themeColor}-img/download.png`">
					<span >下载Dkey驱动</span>
				</li>
				<!-- <li  data-toggle="modal" data-target=".pswdModal-modal-lg" >			
					<img  :src="`/static/${themeColor}-img/password.png`" />
					<span>密码策略</span>
				</li> -->
				<li data-toggle="modal" data-target="#addrole" >
					<img :src="`/static/${themeColor}-img/add.png`" />
					<span >新增</span>
				</li>
			</ul>
		</div>
		<div class="table-wrap" style="min-height:500px;position: relative;">
			<div class="notice" v-if='status'>	{{errorMSG}} </div>
			<!--加载数据-->
		    <loading v-show= '!show'></loading>
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width: 50px;">序号</th>
						<th>用户名</th>
						<th>角色</th>
						<th>真实姓名</th>
						<th>公司部门</th>
						<th>邮箱地址</th>
						<th>认证方式</th>
						<th>操作</th>
					</tr>
				</thead>
				<transition name="fade" mode="out-in" v-if='!status'>
				<!--<div v-if='!status'>-->
					<tbody v-if = 'show'>
						<tr v-for='(user , index) in data'>
						<template v-if="index <users.length">
							<td >{{index+1}}</td>
							<td style="display:none;">{{user.u_id}}</td>
							<td>{{user.user_id}}</td>
							<td v-if="user.user_group == '1'">超级管理员</td>
							<td v-else-if="user.user_group == '2'">管理员</td>
							<td v-else-if="user.user_group == '3'">审计员</td>
							<td>{{user.real_name ? user.real_name : "-"}}</td>
							<td>{{user.department ? user.department : "-"}}</td>
							<td>{{user.email ? user.email : "-"}}</td>
							<td v-if="user.user_group == '1'">DKey登陆</td>
							<td v-else>口令认证</td>
							<td>
								<button @click="deleteMsg( user.u_id )" class="dele-btn sure-btn button">删除</button>
								<button v-if="user.user_group != '1'" @click='alterRole( user )' class="alter-btn sure-btn button">修改</button>
								<button data-toggle="modal" data-target="#myModal" v-if="user.user_group == '1'" class="write-btn yellow-btn button">	写入key</button>
							</td>
							</template>
						<template v-else>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
						</template>
						</tr>
					</tbody>
				<!--</div>-->
				</transition>
			</table>
		</div>
		<p class="note">注释：仅能在IE浏览器上进行DKEY写入操作。</p>
		<pwdtactics></pwdtactics>
		<addnetmanage v-on:getData="getUser()"></addnetmanage>
		<alterrole v-on:getData="getUser()" :user="user"></alterrole>
		 <Modals :id ="'confirm'" :title ="'提示'" :status = "result" :errorMsg="errorMSG"  @sentErrorMsg = "getErrorMsg" @modalEvent ="deleteUser">
				<div slot ="modal_content">
						<p style="font-size:16px;">确定删除此用户？</p>
				</div>
		</Modals>
	</div>
</template>
<script>
	import userservice from 'services/userService'
	import loading from 'components/common/loading'
  import addnetmanage from './admin/addNetmanage.vue'
  import pwdtactics from './admin/pwdTactics.vue'
	import alterrole from './admin/alterRole.vue'
	import Modals from 'components/common/Modals'
	export default {
		components: {
			addnetmanage,
			pwdtactics,
			alterrole,
			Modals,
      loading
		},
		data() {
			return {
				users:[],
				user:{},
				uid:"",
				types:"",
        show:false,
				status:false,
				errorMSG:'',
				result:''
			}
		},
		mounted() {
			this.getUser()
		},
		computed: {
			data: function () {
				let tableData = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
				for (let i = 0; i < this.users.length; i++) {
					tableData[i] = this.users[i]
				}
				return tableData
			}
		},
		methods: {
			getUser() {
				userservice.getUser()
				.then((res) => {
					if (res.errcode === 0) {
						this.show=true
						this.status=false;
						this.users = res.users
					} else {
						this.show=true
						this.status=true;
						this.errorMSG=res.errorMessage
					}
				})
      },
			getErrorMsg(msg) {
				this.errorMSG = msg
      },
			alterRole(user) {
				this.user = user
				$("#alterrole").modal('show')
			},
			deleteMsg(id) {
				this.uid = ""
				this.uid = id
				this.types = "del"
				this.result=''
				this.errorMSG=''
				$("#confirm").modal('show')
			},
			deleteUser() {
				this.result='ing'
				userservice.deleteUser(this.uid)
        .then((res) => {
					
					if (res.errcode === 0) {
						this.getUser()
            this.result='ok'
						this.uid = ""
					} else {
						this.result='error'
						this.errorMSG=res.errorMessage
					}
				})
			}
		}
	}
</script>